<template>
  <div class="wrap">
    <div class="home" v-show="home">
      <el-collapse v-model="activeNames" class="help">
        <el-collapse-item title="在线客服设置引导" name="1">
          <div @click.stop="jump('zxkf-mgc')" class="list">敏感词设置</div>
          <div @click.stop="jump('zxkf-ly')" class="list">个性化留言框</div>
          <div @click.stop="jump('zxkf-gxh')" class="list">个性化接待流程（VIP客户，多咨询入口等）</div>
          <div @click.stop="jump('zxkf-zxdj')" class="list">在线对接</div>
        </el-collapse-item>
        <el-collapse-item title="呼叫中心设置引导" name="2">
          <div @click.stop="jump('hjzx-ivr')" class="list">IVR流程配置</div>
          <div @click.stop="jump('hjzx-jnz')" class="list">技能组配置</div>
        </el-collapse-item>
        <el-collapse-item title="工单设置引导" name="3">
          <div @click.stop="jump('gd-gd')" class="list">工单配置</div>
        </el-collapse-item>
        <el-collapse-item title="质检设置引导" name="4">
          <div @click.stop="jump('zj-zj')" class="list">质检配置</div>
        </el-collapse-item>
        <!--<el-collapse-item title="短信设置引导" name="5">-->
          <!--<div @click.stop="jump('role')" class="list">短信配置</div>-->
        <!--</el-collapse-item>-->
        <el-collapse-item title="角色设置引导" name="6">
          <div @click.stop="jump('js-js')" class="list">角色配置</div>
        </el-collapse-item>
      </el-collapse>
      <p class="more" @click.stop="jump('old')">更多配置（点击回到旧版设置）</p>
    </div>
    <keep-alive>
      <component :is="currentIndex" v-show="!home" :config="config"></component>
    </keep-alive>
  </div>
</template>

<script>
  import webchatWord from './webchatWord.vue'
  import webchatSchedule from './webchatSchedule.vue'
  import webchatFace from './webchatFace'
  import webchatMessage from './webchatMessage'
  import callIVR from './callIVR'
  import callSkill from './callSkill'
  import BusinessHelp from './businessHelp.vue'
  import roleHelp from './roleHelp'
  import qualitycheckHelp from './qualitycheckHelp'
  import {serviceBusinessType} from '@/utils/workflowUtils'
  export default {
    name: 'moreHelp',
    data () {
      return {
        activeNames: '1',
        home: true,
        currentIndex: '',
        config: {type: '', configType: ''}
      }
    },
    components: {
      'zxkf-mgc': webchatWord,
      'zxkf-gxh': webchatSchedule,
      'zxkf-zxdj': webchatFace,
      'zxkf-ly': webchatMessage,
      'hjzx-ivr': callIVR,
      'hjzx-jnz': callSkill,
      'gd-gd': BusinessHelp,
      'zj-zj': qualitycheckHelp,
      'js-js': roleHelp
    },
    provide () {
      return {
        back: this.back
      }
    },
    methods: {
      jump (path) {
        if (path !== 'old') {
          this.currentIndex = path
          serviceBusinessType.some((item) => {
            if (item.value === path) {
              this.config = {type: path, configType: item.label}
              return true
            }
          })
          this.home = false
        } else {
          this.$router.push({path: '/index/config'})
          this.home = true
        }
      },
      back () {
        this.home = true
        this.currentIndex = ''
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "../../../../assets/common.styl"
  .wrap
    height 100%
    overflow-y auto
    .home
      padding 20px
  .help
    width 300px
  .list
    margin 5px
    color $c-main
    cursor pointer
  .more
    margin 30px 0 50px
    cursor pointer
    font-size 14px
    color $c-main
</style>
